<template>
  <div class="node-panel">
    <div class="node-item" @mousedown="openSelection">
      <div class="node-item-icon bpmn-selection"></div>
      <span class="node-label">选区</span>
    </div>
    <div class="node-item" @mousedown="addStartNode">
      <div class="node-item-icon node-start"></div>
      <span class="node-label">开始</span>
    </div>
    <div class="node-item" @mousedown="addLlmTask">
      <div class="node-item-icon node-llm"></div>
      <span class="node-label">AI问答</span>
    </div>
    <div class="node-item" @mousedown="addVectorTask">
      <div class="node-item-icon node-db"></div>
      <span class="node-label">知识库</span>
    </div>
    <div class="node-item" @mousedown="addDatabaseTask">
      <div class="node-item-icon node-database"></div>
      <span class="node-label">DB</span>
    </div>
    <div class="node-item" @mousedown="addFunctionTask">
      <div class="node-item-icon node-func"></div>
      <span class="node-label">函数</span>
    </div>
    <div class="node-item" @mousedown="addHttpTask">
      <div class="node-item-icon node-http"></div>
      <span class="node-label">HTTP</span>
    </div>
    <div class="node-item" @mousedown="addBugTask">
      <div class="node-item-icon node-bugs"></div>
      <span class="node-label">爬虫</span>
    </div>
    <div class="node-item" @mousedown="addEndNode">
      <div class="node-item-icon node-end"></div>
      <span class="node-label">结束</span>
    </div>
  </div>
</template>
<script>
import LogicFlow from '@logicflow/core';
import LLMNode from "@/components/flow/nodes/LLMNode.js";
import VectorNode from "@/components/flow/nodes/VectorNode.js";
import StartNode from "@/components/flow/nodes/StartNode.js";
import EndNode from "@/components/flow/nodes/EndNode.js";
import FunctionNode from "@/components/flow/nodes/FunctionNode.js";
import HttpNode from "@/components/flow/nodes/HttpNode.js";
import DatabaseNode from "@/components/flow/nodes/DatabaseNode.js";
import BugNode from "@/components/flow/nodes/BugNode.js";

export default {
  name: "NodePanel",
  data() {
    return {
      isMousemove: false,
    }
  },
  props: {
    lf: Object,
  },
  mounted() {
    //选区框选使用的
    let lf = this.$props.lf;
    lf &&
      lf.on("selection:selected", () => {
        lf.updateEditConfig({
          stopMoveGraph: false,
        });
      });
    this.registerNode();
  },
  methods: {
    registerNode() {
      let that = this;
      let lf = this.$props.lf;
      lf.register(LLMNode);
      lf.register(VectorNode);
      lf.register(StartNode);
      lf.register(EndNode);
      lf.register(FunctionNode);
      lf.register(HttpNode);
      lf.register(BugNode);
      lf.register(DatabaseNode);
    },
    openSelection(event) {
      (this.$props.lf).updateEditConfig({
        stopMoveGraph: true
      });
      event.preventDefault();
    },
    addStartNode(event) {
      (this.$props.lf).dnd.startDrag({
        type: "StartNode",
        text: "开始",
      });
      event.preventDefault();
    },
    addLlmTask(event) {
      (this.$props.lf).dnd.startDrag({
        type: "LLMNode",
        text: "LLM对话",
        properties: {},
      });
      event.preventDefault();
    },
    addVectorTask(event) {
      (this.$props.lf).dnd.startDrag({
        type: "VectorNode",
        text: "知识库",
      });
      event.preventDefault();
    },
    addFunctionTask(event) {
      (this.$props.lf).dnd.startDrag({
        type: "FunctionNode",
        text: "函数调用",
      });
      event.preventDefault();
    },
    addDatabaseTask(event) {
      (this.$props.lf).dnd.startDrag({
        type: "DatabaseNode",
        text: "DB调用",
      });
      event.preventDefault();
    },
    addHttpTask(event) {
      (this.$props.lf).dnd.startDrag({
        type: "HttpNode",
        text: "HTTP调用",
      });
      event.preventDefault();
    },
    addBugTask(event) {
      (this.$props.lf).dnd.startDrag({
        type: "BugNode",
        text: "网页爬虫",
      });
      event.preventDefault();
    },

    addEndNode(event) {
      (this.$props.lf).dnd.startDrag({
        type: "EndNode",
        text: "结束",
      });
      event.preventDefault();
    },
  },
};

</script>
<style>
.node-panel {
  margin: 10px;
  position: absolute;
  top: 40px;
  left: 0px;
  width: 60px;
  padding: 5px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 4px;
  text-align: center;
  z-index: 101;
}

.node-item {
  margin-bottom: 10px;
}

.node-item-icon {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  background-size: cover;
}

.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.bpmn-selection {
  background: url() center center no-repeat;
  cursor: pointer;
  filter: invert(45%) sepia(83%) saturate(365%) hue-rotate(123deg) brightness(98%) contrast(86%);
}

.node-start {
  background: url() center center no-repeat;
  cursor: pointer;
  filter: invert(45%) sepia(83%) saturate(365%) hue-rotate(123deg) brightness(98%) contrast(86%);
}

.node-end {
  background: url() center center no-repeat;
  cursor: pointer;
  filter: invert(45%) sepia(83%) saturate(365%) hue-rotate(123deg) brightness(98%) contrast(86%);
}

.node-llm {
  background: url() center center no-repeat;
  cursor: pointer;
  filter: invert(45%) sepia(83%) saturate(365%) hue-rotate(123deg) brightness(98%) contrast(86%);
}

.node-db {
  background: url() center center no-repeat;
  cursor: pointer;
  filter: invert(45%) sepia(83%) saturate(365%) hue-rotate(123deg) brightness(98%) contrast(86%);
}

.node-http {
  background: url() center center no-repeat;
  cursor: pointer;
  filter: invert(45%) sepia(83%) saturate(365%) hue-rotate(123deg) brightness(98%) contrast(86%);
}

.node-database {
  background: url() center center no-repeat;
  cursor: pointer;
  filter: invert(45%) sepia(83%) saturate(365%) hue-rotate(123deg) brightness(98%) contrast(86%);
}

.node-func {
  background: url() center center no-repeat;
  cursor: pointer;
  filter: invert(45%) sepia(83%) saturate(365%) hue-rotate(123deg) brightness(98%) contrast(86%);
}

.node-bugs {
  background: url() center center no-repeat;
  cursor: pointer;
  filter: invert(45%) sepia(83%) saturate(365%) hue-rotate(123deg) brightness(98%) contrast(86%);
}
</style>